<template>
  <!-- vue3组件中的模板结构可以没有根标签 -->
<h1>setup是所有组合式api表演的舞台</h1>
<h1>一个人都没有信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h2>类型:{{job.type}}</h2>
<h2>薪水:{{job.salary}}</h2>
<button @click="sayHello">点击弹窗</button>
<button @click="changeInfo">点击改变信息</button>

<Demo msg='你好呀' text='李彤康' @hello="showHelloMsg">
<template v-slot:qwe>
  <span>插槽1</span>
</template>
<span></span>
</Demo>
<h1>计算属性练习</h1>
<computedDemo></computedDemo>
<h1>监听属性练习</h1>
<watchDemo></watchDemo>
<h1>生命周期练习</h1>
<lifeCicle v-if="isShow"></lifeCicle>
<button @click = "isShow = !isShow">组件显示开关</button>
<h1>自定义Hook练习</h1>
<directiveHook v-if="isShow1"></directiveHook>
<button @click = "isShow1 = !isShow1">组件显示开关</button>
<h1>torefAndtorefs练习</h1>
<torefAndtoref></torefAndtoref>
<h1>customerRef练习</h1>
<customerRef></customerRef>
</template>



<script>
// import {h} from 'vue';
import {reactive, ref} from 'vue';
import Demo from "./components/Demo.vue"
import computedDemo from "./components/computedDemo.vue"
import watchDemo from "./components/watchDemo.vue";
import lifeCicle from "./components/lifeCicle.vue";
import directiveHook from "./components/directiveHook.vue";
import torefAndtoref from './components/torefAndtorefs.vue';
import customerRef from './components/customerRef.vue';

export default {
  name: 'App',
  //不建议 vue2的配置项和vue3的配置项混用。
  //ref函数定义一个响应式数据。 处理基本数据类型,取第一层的时候要用.value
  //reactive 处理对象类型,内部基于proxy实现。
  setup(){
    let name = ref('ltk');
    let age = ref(17);
    let isShow = ref(true);
    let isShow1 = ref(true);
     // let job = ref({
    //   type: '前端工程师',
    //   salary: '30k',
    // })

    let job = reactive({
      type: '前端工程师',
      salary: '30k',
    })

    function sayHello(){
      alert(`我的名字是${name.value},年龄${age.value}`);
      console.log('@@',age);
      
    }
    
    function showHelloMsg(value){
     alert(`成功弹窗自定义事件${value}`);
    }

    function changeInfo(){
      name.value="ktl";
      age.value=18;
      // job.value.type = 'UI工程师';
      // job.value.salary = '40k';
      job.type = 'UI工程师';
      job.salary = '40k';
    }

    return {
      name,
      age,
      job,
      isShow,
      isShow1,
      sayHello,
      changeInfo,
      showHelloMsg,
 
    }

    // return ()=>h('h1','渲染函数');
  },
  components: {
    Demo,
    computedDemo,
    watchDemo,
    lifeCicle,
    directiveHook,
    torefAndtoref,
    customerRef
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
